<template>
  <div class="row">
      <div>
        <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
          <a :href="user.html_url" target="_blank">
            <img :src="user.avatar_url" style="width: 100px" />
          </a>
          <p class="card-text">{{user.login}}</p>
        </div>
      </div>
      <!-- 欢迎词 -->
      <h1 v-show="info.isFirst">欢迎使用！</h1>
      <!-- 加载中 -->
      <h1 v-show="info.isLoading">加载中,请稍后 ！</h1>

      <!-- 展示错误信息 -->
      <h1 v-show="info.errMsg">{{info.errMsg}}</h1>

  </div>
</template>

<script>
    export default {
        name:"List",
        data() {
          return {
            info:{
              isFirst:true,
              isLoading:false,
              errMsg:'',
              users:[],
            }
            
          }
        },
        mounted(){
          this.$bus.$on('updateListData',(dataObj)=>{
            console.log("我是list组件,收到数据",dataObj)
            // this.isFirst=dataObj.isFirst
            // this.isLoading=dataObj.isLoading
            // this.errMsg=dataObj.errMsg
            // this.users=dataObj.users
            console.log("this：",this)
            // this.info=dataObj
            this.info={...this.info,...dataObj}
          })
        }
    }
</script>

<style scoped>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}
.card {
  float: left;
  padding: 0.75rem;
  margin: 5px;
  border: 1px solid #efefef;
  text-align: center;

}
.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}
.card-text {
  font-size: 85%;
}
</style>
